<template>
  <!-- 页眉 -->
  <header class="bg-dark text-white py-3 shadow-sm">
    <!-- 容器 -->
    <div class="container d-flex justify-content-between align-items-center">
      <!-- 名字 -->
      <h1 class="logo">食光记</h1>
      <!-- 导航部分，使用Flex布局，垂直居中对齐 -->
      <nav class="d-flex align-items-center">
        <!-- 导航链接，点击跳转到首页 -->
        <router-link to="/" class="text-white nav-link">首页</router-link>
        <!-- 导航链接，点击跳转到添加美食页面 -->
        <router-link to="/add-food" class="text-white nav-link">添加美食</router-link>
        <!-- 导航链接，点击跳转到个人信息页面 -->
        <router-link to="/user-profile" class="text-white nav-link">个人信息</router-link>
        <!-- 导航链接，用户登录状态下显示退出按钮，点击触发handleLogout方法 -->
        <router-link v-if="user" to="/" @click.prevent="handleLogout" class="text-white nav-link">退出</router-link>
        <!-- 导航链接，用户未登录状态下显示登录按钮 -->
        <router-link v-else to="/login" class="text-white nav-link">登录</router-link>
        <!-- 导航链接，用户未登录状态下显示注册按钮 -->
        <router-link v-if="!user" to="/register" class="text-white nav-link">注册</router-link>
        <!-- 用户登录状态下显示用户头像 -->
        <div v-if="user" class="avatar-wrapper ml-3">
          <img :src="user.avatar || defaultAvatar" alt="Avatar" class="avatar" />
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  // 定义组件的名称
  name: 'Header',
  data() {
    return {
      // 默认头像路径
      defaultAvatar: '/src/assets/images/duojiaoyutou.jpg',
    };
  },
  computed: {
    // 从vuex状态中获取user
    ...mapState(['user']),
  },
  methods: {
    // 从vuex中导入logout方法
    ...mapActions(['logout']),
    // 处理用户退出逻辑
    handleLogout() {
      this.logout();
      this.$router.push('/');
    },
  },
};
</script>

<style scoped>
/* 页眉的样式，背景色为#343a40，固定在顶部，z-index为1000，带有阴影效果 */
header {
  background-color: #343a40; 
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 网站logo的样式，使用Pacifico字体，字体大小为1.8rem */
.logo {
  font-family: 'Pacifico', cursive; 
  font-size: 1.8rem;
}
/* 导航部分的样式，使用Flex布局，子元素之间的间隔为1rem */
nav {
  display: flex;
  gap: 1rem;
}
/* 导航链接的样式，字体大小为1.1rem，颜色变化有过渡效果 */
.nav-link {
  font-size: 1.1rem;
  transition: color 0.3s ease;
}
/* 导航链接的hover效果，颜色变为#ffc107 */
.nav-link:hover {
  color: #ffc107; 
}
/* 头像容器的样式，位置为相对，显示为内联块，鼠标悬停时显示为指针 */
.avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
/* 头像的样式，宽度和高度为40px，圆角，覆盖显示 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
</style>
